<template>
  <div class="footer">
    <footer id="footer">
      <div class="top">
        <div class="block left">
          <h2>合作伙伴</h2>
          <hr />
          <ul>
            <li>途牛旅游网</li>
            <li>驴妈妈旅游网</li>
            <li>携程旅游</li>
            <li>中国青年旅行社</li>
          </ul>
        </div>
        <div class="block center">
          <h2>旅游FAQ</h2>
          <hr />
          <ul>
            <li>旅游合同签订方式？</li>
            <li>儿童价是基于什么制定的？</li>
            <li>旅游的线路品质怎么界定的？</li>
            <li>单房差是什么？</li>
            <li>旅游保险有那些种类？</li>
          </ul>
        </div>
        <div class="block right">
          <h2>联系方式</h2>
          <hr />
          <ul>
            <li>微博：weibo.com/ycku</li>
            <li>邮件：ycku@ycku.com</li>
            <li>地址：江苏盐城无名路123 号</li>
          </ul>
        </div>
      </div>
      <div class="bottom">Copyright © YCKU 瓢城旅行社| 苏ICP 备120110119 号| 旅行社经营许可证：L-YC-BK12345</div>
    </footer>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
#footer {
  height: 300px;
  background-color: #eaeaea;
  clear: both;
  position: relative;
}
#footer .top {
  width: 1263px;
  height: 281px;
  margin: 0 auto;
  text-align: center;
}
#footer .block {
  width: 310px;
  height: 280px;
  display: inline-block;
  text-align: left;
  vertical-align: top;
}
#footer h2 {
  font-size: 24px;
  font-weight: normal;
  padding: 20px 0 0 20px;
}
#footer hr {
  width: 90%;
  border: 1px dashed #bbbaba;
}
#footer ul {
  font-size: 14px;
  color: #777;
  text-indent: 20px;
  line-height: 2;
  list-style: none;
  font-style: normal;
  margin: 0;
  padding: 0;
}
#footer .bottom {
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #777;
  background-color: #eaeaea;
  border-top: 1px solid rgb(158, 158, 158);
}
</style>